<!-- 蓝色登录页面2 -->
<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				<view class="logo"><image src="~@/static/jitai/logo.png"></image></view>
				<view class="slogan">琻泰科技，微环境空气治理专家</view>
				<view class="dian_box">
					<text></text>
				</view>
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">帐号</text>
						<input type="text" name="username" placeholder="请输入您的登录用户名" maxlength="11" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="password" />
					</view>
					<view class="t-d">
						<navigator url="/pages/simple/findpassword" class="reg_s" hover-class="none">忘记密码？</navigator>
					</view>
					<u-button type="success" shape="circle" @click="login">提交登录</u-button>
					<navigator url="/pages/simple/reg" class="reg" hover-class="none">帐号注册</navigator>
				</form>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init()
		{

		},
		login() {
			
		}
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss">
.img-a {
	width: 100%;
	height: 420rpx;
	background-size: 100%;
	position: relative;
	
	&::after {
		width: 700rpx;
		height: 420rpx;
		background: url(~@/static/jitai/line.png) no-repeat center -60px #35c877;
		background-size: auto 100%;
		content: '';
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		border-radius: 0 0 700rpx 0;
		box-shadow: 0 0 18rpx rgba(0,0,0,0.2);
	}
	&::before {
		width: 500rpx;
		height: 420rpx;
		background: #35c877;
		content: '';
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		border-radius: 0 0 0 700rpx;
	}
	
	.t-b {
		text-align: left;
		font-size: 32rpx;
		color: #ffffff;
		padding: 70rpx 0 20rpx 70rpx;
		position: absolute;
		z-index: 9;
		
		.logo {
			margin-bottom: 10rpx;
			
			image {
				width: 300rpx;
				height: 99rpx;
			}
		}
		.slogan {
			font-size: 26rpx;
			margin-bottom: 60rpx;
			opacity: 0.7;
		}
		.dian_box {
			width: 100%;
			height: 26rpx;
			position: relative;
			
			&::after {
				width: 26rpx;
				height: 26rpx;
				content: '';
				display: block;
				background: #ffde00;
				border-radius: 26rpx;
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				opacity: 1;
			}
			&::before {
				width: 26rpx;
				height: 26rpx;
				content: '';
				display: block;
				background: #ffde00;
				border-radius: 26rpx;
				position: absolute;
				left: 20rpx;
				top: 0rpx;
				opacity: 0.9;
			}
			
			text {
				width: 26rpx;
				height: 26rpx;
				display: block;
				background: #ffde00;
				border-radius: 26rpx;
				position: absolute;
				left: 40rpx;
				top: 0rpx;
				opacity: 0.8;
				
				&::before {
					width: 26rpx;
					height: 26rpx;
					content: '';
					display: block;
					background: #ffde00;
					border-radius: 26rpx;
					position: absolute;
					left: 20rpx;
					top: 0rpx;
					opacity: 0.7;
				}
			}
		}
	}
}
.reg {
	font-size: 28rpx;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}
.reg_s {
	font-size: 28rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-bottom: 30rpx;
	color: #999999;
}

.login-view {
	width: 100%;
	position: relative;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login .txt {
	width: 16%;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
	margin-left: 16rpx;
	width: 84%;
}

.t-login .t-a {
	width: 100%;
	margin-bottom: 30rpx;
	border-bottom: 1px solid #e9e9e9;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>